<template>
  <div class="ui_set_password">
    <van-nav-bar title="设置密码">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <div class="set_password_handle_container">
      <div class="input_container password_input_container">
        <input
          class="input_item"
          type="password"
          placeholder="请输入密码，6-16位字母、数字、字符"
          maxlength="16"
          v-model="loginPassword"
          @blur="loginPasswordInputBlur"
          @input="loginPasswordInputChange">
      </div>
      <div class="input_container">
        <input
          class="input_item"
          type="password"
          placeholder="请再次输入密码"
          maxlength="16"
          v-model="loginPassword2" @input="checkPasswordIsSame">
      </div>
      <div class="set_password_tip">
        <span v-if="passwordIsSame">设置密码后，即可使用手机号+密码登录</span>
        <span class="password_not_same" v-if="!passwordIsSame">两次密码输入不一致</span>
      </div>
      <div class="submit_btn_box">
        <button
          class="submit_btn"
          :class="loginPasswordIsValidate ? '' : 'disable'"
          :disabled="!loginPasswordIsValidate"
          @click="submitConfirm">确定</button>
      </div>
    </div>
    <ErrorPopup :isError="isError" :errorMessage="errorMessage"></ErrorPopup>
  </div>
</template>

<script type="text/babel">
import ErrorPopup from "component/login/ErrorPopup";
import { resetPasswordVerify, updateBeeUser } from "services/beeUser";
import { setToastTimer } from "framework/utils/utils";
import { mapGetters } from "vuex";

export default {
  name: "SetPassword",
  components: { ErrorPopup },
  props: {
    code: String,
    mobileNo: String
  },
  data() {
    return {
      loginPassword: "",
      loginPassword2: "",
      isError: false,
      errorMessage: "",
      loginPasswordIsValidate: false,
      passwordIsSame: true
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    loginPasswordInputChange() {
      this.loginPasswordIsValidate = this.validateLoginPassword();
    },
    loginPasswordInputBlur() {
      if (!this.validateLoginPassword()) {
        this.isError = true;
        this.errorMessage = "密码为6至16位字母、数字、字符组成";
        setTimeout(() => {
          this.isError = false;
          this.errorMessage = "";
        }, 3000);
      }
    },
    checkPasswordIsSame() {
      this.passwordIsSame = this.loginPassword2 === this.loginPassword;
    },
    validateLoginPassword() {
      const loginPasswordReg = /^[a-zA-Z0-9`~!@#$%^&*()_+<>?:"{},.\/;'[\]]{6,16}$/;

      return loginPasswordReg.test(this.loginPassword);
    },
    back() {
      this.$router.go(-1);
    },
    submitConfirm() {
      const { userInfo: { userNo }, loginPassword } = this;

      updateBeeUser({
        userNo,
        loginPassword,
        codeType: "forgetThePassword"
      }).then((response) => {
        console.info(response);
        // response.object.loginPassword
        this.$toast({
          message: "设置密码成功！",
          duration: 1000,
          forbidClick: true
        });
        setToastTimer(() => {
          this.$store.dispatch("refreshUserInfo", this.userInfo);
          this.$router.replace("/setmessage");
        }, 1000);
      });
    }
  }
};
</script>

<style scoped lang="less">
.ui_set_password {
  .set_password_handle_container {
    margin-top: 30px;
    .input_container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 85px;
      padding: 0 30px;
      background-color: #fff;
      .input_item {
        flex: 1 0 auto;
        height: 100%;
        line-height: 100%;
        padding: 30px 0;
        outline: none;
        border: none;
        font-size: 26px;
      }
    }
    .password_input_container {
      border-bottom: 1px solid #e1e1e1;
    }
    .set_password_tip {
      padding: 15px 30px;
      color: #999;
      font-size: 24px;
      .password_not_same {
        color: #f00;
      }
    }
    .submit_btn_box {
      padding: 0 30px;
      .submit_btn {
        width: 100%;
        height: 90px;
        outline: none;
        border: none;
        border-radius: 45px;
        background-color: #f7a427;
        color: #fff;
        font-size: 36px;
        &.disable {
          background-color: #fbcb82;
        }
      }
    }
  }
}
</style>
